<script setup>

import {
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import router from "@/router/index.js";


function handlerClick(path) {
  router.replace(path)
}


</script>

<template>
  <div class="common-layout" style="height: 100%; width: 100%">
    <el-container>
      <el-aside width="220px">
        <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
        >
          <el-menu-item index="1" @click="handlerClick('/')">
            <el-icon>
              <icon-menu/>
            </el-icon>
            <span>
              <router-link to="/">高精度文字识别</router-link>
            </span>
          </el-menu-item>

          <el-menu-item index="2" @click="handlerClick('/image/imageIdentify')">
            <el-icon>
              <setting/>
            </el-icon>
            <span>
            <router-link to="/image/imageIdentify">图片识别</router-link>
            </span>
          </el-menu-item>
          <el-sub-menu index="3">
            <template #title>
              <el-icon>
                <location/>
              </el-icon>
              <span>其他识别</span>
            </template>
            <el-menu-item-group title="医疗场景OCR">
              <el-menu-item index="3-1" @click="handlerClick('/image/medicalReportOcr')">
                <router-link to="/image/medicalReportOcr">医疗检验报告单识别</router-link>
              </el-menu-item>


              <el-menu-item index="3-2" @click="handlerClick('/image/healthReportOcr')">

                <router-link to="/image/healthReportOcr">医疗诊断报告单识别</router-link>
              </el-menu-item>
            </el-menu-item-group>

          </el-sub-menu>

          <el-sub-menu index="4">
            <template #title>
              <el-icon>
                <location/>
              </el-icon>
              <span>智能图像处理</span>
            </template>


            <el-menu-item index="4-1">
              <router-link to="/image/imgSelfieAnime"> 人物动漫化</router-link>
            </el-menu-item>


            <el-menu-item index="4-2">
              <router-link to="/image/imgQualityEnhance"> 图像无损放大</router-link>
            </el-menu-item>

            <el-menu-item index="4-3">
              <router-link to="/image/imageUnderstand"> 图片理解</router-link>
            </el-menu-item>

            <el-menu-item index="4-4">
              <router-link to="/image/imgDefinitionEnhance"> 图像修复</router-link>
            </el-menu-item>

            <el-menu-item index="4-5">
              <router-link to="/image/imgStyleTrans"> 图像风格转换</router-link>
            </el-menu-item>

            <el-menu-item index="4-6">
              <router-link to="/image/imgColourize"> 黑白图像上色</router-link>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>

      <el-main style="overflow-y: auto;overflow-x: hidden">
        <router-view/>
      </el-main>
    </el-container>
  </div>
</template>


<style scoped>
.common-layout {
  height: 100vh;
  background: linear-gradient(to bottom, #ccebf8, #ffffff); /* 从淡蓝色到白色 */
  display: flex;
}

.el-aside {
  background: linear-gradient(to bottom, #ccebf8, #ffffff); /* 从淡蓝色到白色 */
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
}

.el-menu {
  background: linear-gradient(to bottom, #ccebf8, #ffffff); /* 从淡蓝色到白色 */
  border-right: none;
  padding: 8px 12px;
}

.el-menu-item {

  height: 48px;
  line-height: 48px;
  margin: 4px 0;
  border-radius: 4px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  padding: 0 16px;
}

.el-menu-item:hover {
  background-color: #f5f7fa;
}

.el-menu-item.is-active {
  background-color: #ecf5ff;
  font-weight: 500;
}

.el-sub-menu__title {
  height: 48px;
  line-height: 48px;
  margin: 4px 0;
  display: flex;
  align-items: center;
  padding: 0 16px;
}

a {
  text-decoration: none;
  color: inherit;
  display: block;
  width: 100%;
}

.el-icon {
  margin-right: 8px;
  font-size: 18px;
  color: #606266;
}

@media (max-width: 768px) {
  .el-aside {
    width: 180px !important;
  }

  .el-menu-item, .el-sub-menu__title {
    font-size: 14px;
  }
}

</style>